/**
 * Created by xiewei on 4/29/17.
 * Login page
 */
function callBackForLogin(openId) {
    $.ajax(
        getAjaxOps('/user/login3rd', {openId:openId})
    ).done(function(res){
        if(res.resultCode == 0){
            setUser(res.data, new Date().getTime());
            clearPreUrl();
            location.replace(PRE_URL);
        }
    }.bind(this));
}

// function appLoginCallBack(openId) {
//     alert("登录回调:"+openId);
//     //url = /user/login3rd  param = {openId:openId}  userId = res.data
//     $.ajax(
//         getAjaxOps('/user/login3rd', {openId:openId})
//     ).done(function(res){
//         if(res.resultCode == 0){
//             setUser(res.data, new Date().getTime());
//             clearPreUrl();
//             location.replace(PRE_URL);
//         }
//     }.bind(this));
// }

var LoginHeader = React.createClass({
    handleRegisterPageClick: function() {
        window.location.replace('register.html');
    },
    handleLoginCancelClick:function () {
        if(PRE_URL.indexOf('personal.html') >= 0){
            window.location.replace('index.html');
        }else{
            window.location.replace(PRE_URL);
        }
    },
    render: function() {
        return (
            <header data-am-widget="header" className="am-header am-header-default am-header-fixed am-no-layout">
                <div className="am-header-left am-header-nav">
                    <a onClick={this.handleLoginCancelClick} className="widht-10s" ><i className="icon_8"></i></a>
                </div>
                <h1 className="am-header-title">登录</h1>
                <div className="am-header-right am-header-nav">
                    <a onClick={this.handleRegisterPageClick}>注册</a>
                </div>
            </header>
        )
    }
});

var LoginMain = React.createClass({
    handleLoginClick: function() {
        var param = {
            phone: ReactDOM.findDOMNode(this.refs.phone).value,
            password: ReactDOM.findDOMNode(this.refs.password).value
        };
        this.props.login(param);
    },
    handleForgetPageClick: function(){
        window.location.replace('forget.html');
    },
    appLogin: function () {
        window.frontshoes.login();
    },
    render: function() {
         return (
             <section id="amz-main" data-tag="css-nav">
                 <div className="div-logo"></div>
                 <ul className="am-list am-list-static am-list-border register">
                     <li><i className="icon-sj_1"></i><input type="tel" className="am-padding-left-lg" maxLength="11" placeholder="请输入手机号" ref="phone"/></li>
                     <li><i className="icon-s_1"></i><input type="password" className="am-padding-left-lg" maxLength="30" placeholder="请输入密码" ref="password"/></li>
                 </ul>
                 <div className="am-g font-15 am-margin-top-lg">
                     <div className="am-u-sm-12 am-text-center">
                         <div className="btn-88 word-space-2" onClick={this.handleLoginClick}>登录</div>
                     </div>
                 </div>
                 <div className="am-padding-top-sm am-padding-bottom-sm font-14 am-text-center font-color-5">
                     <a onClick={this.handleForgetPageClick}>忘记密码</a>
                 </div>
                 <div className="box am-margin-top-lg">
                     <div><div className="bottomline"></div></div>
                     <div className="box-1 am-text-center"><div className="font-color-1 font-14">第三方登录</div></div>
                     <div><div className="bottomline"></div></div>
                 </div>
                 <div className="am-margin-top-sm"><img onClick={this.appLogin} className="width-45px am-center" src="../assets/images/icons/weix.png"/></div>
             </section>
         )
     }
});


var Page = React.createClass({
    getInitialState: function() {
        return{
            msgHidden: true,
            msg: ''
        }
    },
    close: function() {
        this.setState({
            msgHidden: true
        });
    },
    login: function(param) {
        if(param.phone == ''){
            this.setState({
                msgHidden: false,
                msg: MSG.PHONE_NOT_NULL
            });
            return false;
        }else if(!PHONE.test(param.phone)){
            this.setState({
                msgHidden: false,
                msg: MSG.PHONE_NOT_RIGHT
            });
            return false;
        }else if(param.password == ''){
            this.setState({
                msgHidden: false,
                msg: MSG.PWD_NOT_NULL
            });
            return false;
        }else if(!PWD.test(param.password)){
            this.setState({
                msgHidden: false,
                msg: MSG.PWD_NOT_RIGHT
            });
        }
        $.ajax(
            getAjaxOps('/user/login', param)
        ).done(function(res){
                if(res.resultCode == 0){
                    setUser(res.data.userId, new Date().getTime());
                    clearPreUrl();
                    window.location.replace(PRE_URL);
                }else {
                    this.setState({
                        msgHidden: false,
                        msg: res.data
                    });
                }
            }.bind(this));
    },
    render: function() {
        return (
            <div>
                <Message hidden={this.state.msgHidden} msg={this.state.msg} close={this.close}/>
                <LoginHeader />
                <LoginMain login={this.login} />
            </div>
        )
    }

});

ReactDOM.render(
    <Page />,
    document.getElementById('root')
);
